import React, {Component} from 'react'

import {Link} from 'react-router-dom'

import {Modal, message} from 'antd';

import api from '../info/ajaxaction'

import '../info/info.css'

import Table from '../../common/moduleTable'

import {connect} from 'react-redux'

import {
  moduleInforesult,
  tabdata,
  pageSize,
  dataDelete,
  exportId,
  tagchange
} from '../../actions/module'

const confirm = Modal.confirm

// 中部类型选择
class Taball extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0
    }
  }

  handle(e) {
    var oIndex = Number(e.target.getAttribute('data-key'))
    let id = Number(e.target.getAttribute('data-id'))
    this.setState({
      currentIndex: oIndex
    })
    this.props.changereasult(id)
  }

  render() {
    let list = Object.assign([], this.props.tanList)
    let newLi = list.splice(-1, 1)
    list = newLi.concat(list)
    return (
      <div className="typeli" style={{height:0,lineHeight:0}}>
        {
          list.map((item, i) => (
            <div key={i} className={i === this.state.currentIndex ? 'active' : ''} onClick={(e) => this.handle(e)} data-key={i}
                 data-id={item.key}>{item.webSiteName}({item.doc_count})</div>
          ))
        }
      </div>
    )
  }
}

@connect(
  state => state.moduleInforesult,
  {
    moduleInforesult,
    tabdata,
    pageSize,
    dataDelete,
    exportId,
    tagchange
  }
)

// 整体
class ModuleInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [],
      decList: [],
      tanList: ['全部', '新闻', '论坛', '微信', '手机App', '微博', '平面媒体', '博客', '贴吧'],
      loading: true,
      currentPage: 1,
      limit: 50,
      deleteArr: [],
      readArr: [],
      abstract: false,
      ishas: false,
      ceshi: true,
      selectedRowKeys: [],
    }
  }

  //数据接口
  renderTabledata() {
    this.props.tabdata(
      this.props.match.params.moduleId,
      this.state.currentPage,
      this.props.limit,
    )
  }

  componentDidMount() {
    this.renderTabledata()
  }

  //删除
  tableAction(actionKey) {
    if (actionKey === "删除") {
      confirm({
        title: '提示',
        content: '确定删除吗',
        onOk: () => {
          alert(this.props)
          message.success('删除成功')
        },
        onCancel() {
        }
      })
    } else if (actionKey === "收藏") {
      api.joinCollection('/vrv-monitor-platform-web/collection/insert', this.id, this.tit, this.content, this.poTime, this.webSite, this.domain, this.positiveOrNegative).then(res => {
        if (res.data.success) {
          message.success('收藏成功')
        }
      })
    }
    else if (actionKey === "已收藏") {
      api.joinCollection('/vrv-monitor-platform-web/collection/delete', this.id).then(res => {
        if (res.data.success) {
          message.success('取消成功')
        }
      })
    } else if (actionKey === "上传") {
      message.success('上传成功')
    }
  }

  //改变类型type
  async changeResult(type) {
    await this.setState({
      websiteType: type
    })
    await this.renderTabledata()

  }

  //分页
  async changeSize(value) {
    await this.props.pageSize(value)
    await this.renderTabledata()
  }

  //删除多个
  deleData() {
    confirm({
      title: '提示',
      content: '确定删除吗',
      onOk: () => {
        if(this.state.deleteArr.length>0){
          this.props.dataDelete(this.state.deleteArr)
          message.success('删除成功');
          this.setState({
            deleteArr:[],
            selectedRowKeys: [],
          })
        }else{
          message.success('请选择要删除的数据')
        }
      },
      onCancel() {
        return false
      }
    })
  }

  //删除单个
  hende(id) {
    confirm({
      title: '提示',
      content: '确定删除吗',
      onOk: () => {
        this.props.dataDelete(id)
        message.success('删除成功')
      },
      onCancel() {
        return false
      }
    })
  }

  //导出
  exportSeles() {
    if(this.state.deleteArr.length>0){
      let sp = this.state.deleteArr.split(',').join(',')
      this.props.exportId(sp)
    }else{
      message.warning('请选择导出项');
    }
  }

  //批量标记已阅
  tagRead() {
    if(this.state.deleteArr.length>0){
      let readArr = []
      this.state.deleteArr.split(',').forEach((item) => {
        if (localStorage.read) {
          let _readArr = localStorage.readingList;
          readArr = JSON.parse(_readArr);
          if (this.state.readArr.indexOf(item) === -1) {
            readArr.push(item)
          }
        } else {
          if (readArr.indexOf(item) === -1) {
            readArr.push(item)
          }
        }
        let _readArr1 = JSON.stringify(readArr);
        localStorage.readingList = _readArr1
        this.setState({
          readArr: readArr
        })
      })
    }else{
      message.warning('请选择标记为已阅项');
    }
  }
  selectChange=(selectedRowKeys, selectedRows) => {
    let arr = selectedRowKeys.join(',')
    this.setState({
      deleteArr: arr
    })
    this.setState({selectedRowKeys});
  };

  oninit(id) {
    return false
  }

  //上传
  pExoort() {
    api.insert('/vrv-monitor-platform-web/popularfeelingsDispose/insert', this.id, this.tit, this.content).then((res) => {
      if (res.data.success) {
        message.success('上传成功')
      }
    })
  }

  //点击分页
  async onChangecurrent(value) {
    await this.setState({
      currentPage: value
    })
    await this.renderTabledata()
  }

  render() {
    const {selectedRowKeys} = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.selectChange
    };
    return (
      <div className="info-content">
        <Taball tanList={this.props.switchlist} changereasult={(id) => this.changeResult(id)}></Taball>
        <div className="table">
          <Table
            click={this.tableAction}
            Abstract={this.state.abstract}
            onshow={this.oninit}
            data={this.props.tableData}
            total={this.props.totals}
            pageSize={this.props.limit}
            rowSelection={rowSelection}
            changeSize={(value) => this.changeSize(value)}
            deleteData={() => this.deleData()}
            exportSeles={() => this.exportSeles()}
            tagRead={() => this.tagRead()}
            pExoort={this.pExoort}
            delete={(value) => this.hende(value)}
            onChange={(currentpage) => this.onChangecurrent(currentpage)}
            currentIndeX={this.state.currentPage}
            ishas={this.state.ishas}
            loading={this.props.loading}
          ></Table>
        </div>
      </div>
    )
  }
}

export default ModuleInfo